<f:layout name="Content" />

<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
     xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

<f:section name="Configuration">
	<flux:form wizardTab="Pncaa" id="banner" icon="{v:extension.path.resources(path: 'Images/Icons/teaser.png')}">
		<flux:form.field.file name="image" />
		<flux:form.field.input name="header" eval="trim,required"/>
		<flux:form.field.input name="linkTarget">
			<flux:form.field.wizard.link />
		</flux:form.field.input>
		<flux:form.field.input name="title" eval="trim,required"/>
		<flux:form.field.input name="description" eval="trim,required"/>
	</flux:form>
</f:section>

<f:section name="Preview">
	<strong>Image</strong>: {image}<br>
	<strong>Header</strong>: {header}<br>
	<strong>Link</strong>: {linkTarget}
	<strong>Title</strong>: {title}<br>
	<strong>Descriptoin</strong>: {description}<br>
</f:section>

<f:section name="Main">
	<div class="image-banner">
		<f:if condition="{image}">
			<figure>
				<f:image src="{image}" alt="{image}" />
			</figure>
		</f:if>
	</div>
	<div class="container">
		<div class="banner-text">
			<f:if condition="{linkTarget}">
				<f:then>
					<f:if condition="{linkTarget -> v:math.round()} > 0">
						<f:then>
							<f:link.page pageUid="{linkTarget}"  rel="" title="{header}">
								<header>{header}</header>
							</f:link.page>
						</f:then>
						<f:else>
							<a href="{linkTarget}" rel="" title="{header}">
								<header>{header}</header>
							</a>
						</f:else>
					</f:if>
				</f:then>
				<f:else>
					<header>{header}</header>
				</f:else>
			</f:if>
			<p class="title">
				{title}
			</p>
			<p class="description">
				{description}
			</p>
		</div>
	</div>
</f:section>

</div>
